<#assign menuId=2>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>上传设计稿-${Application.systemName!}</title>
        <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
        <!-- bootstrap 3.0.2 -->
        <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <!-- font Awesome -->
        <link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <!-- Ionicons -->
        <link href="../css/ionicons.min.css" rel="stylesheet" type="text/css" />
        <!-- Theme style -->
        <link href="../css/AdminLTE.css" rel="stylesheet" type="text/css" />

        
        <script type="text/javascript" src="../js/lib/jquery.min.js"></script>
        <link type="text/css" href="../css/datepicker/datepicker3.css"/>
        <link href="../css/bootstrap-tagsinput.css" rel="stylesheet" type="text/css" >
        <link href="../css/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet" type="text/css" />
		<link href="../css/myself.css" rel="stylesheet" type="text/css" />
    </head>
    <body class="skin-blue">
        <!-- header logo: style can be found in header.less -->
        <#include "../header.html" />
        <div class="wrapper row-offcanvas row-offcanvas-left">
            <!-- Left side column. contains the logo and sidebar -->
            <#include "../menu.html" />

            <!-- Right side column. Contains the navbar and content of the page -->
           <aside class="right-side">
           	<section class="content-header">
                    <h1 >上传设计稿
                    	<!--<small><a href="#">返回</a></small>-->
                    </h1>
                    
                    <div class="clear"></div>
                    <ol class="ol_left">
                    	<li>当前位置：</li>
                        <li><a href="../designorder/list?pageNo=1">设计订单</a></li>
                        <li><a href="../designorder/detail?businessId=${businessId!}&orderId=${orderId!}">> 设计订单详情</a></li>
                        <li>> 上传设计稿</li>
                    </ol>
                    <hr class="no-margin" />
            </section>
            <section class="content">
            	<div class="row">
            		<div class="col-md-12">
                        <div class="box">
                        <form id="form" enctype="multipart/form-data">
                            <div class="clearfix center"> 
                                <span class="pull-left center bold">款式图</span>
                                <div class="col-md-12 photo">
                                    <div class="col-md-4 col-md-offset-4  text-center">
                                        <span class="btn btn-primary shangchuan" id="file_upload"><input type="button" name="">点击上传款式图</span>
                                            <p>建议尺寸：480*270px</p>
                                            <p>仅支持jpg、png、bmp格式</p>
                                        </span>
                                    </div>
                                    <div class="zhanshi" >
                                        <!-- <img id="preview" /> -->
                                        <div class="zhanshi_find1">
                                            <div class="col-md-8 ">
                                                <img id="zhanshi_photo" src="../images/Design_draft_03.jpg">
                                            </div>
                                            <div class="col-md-4">
                                                <a class="tianjia">
                                                    <img src="../img/tianjia.png">
                                                    <input type="file" accept="image/*" id="file_upload2" >
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                            <div class=" custorm-view clearfix center">
                            	<div class="pull-left bold">设计信息</div>   
                                <div class="style-chart clearfix" style="width: 100%; margin-top: 30px">
                                        <div class="">
                                            <div class=" find-col" style="width: auto;">
                                                
                                                <label>
                                                    <span>年份</span>&nbsp;&nbsp;
                                                    <select class="" id="period" name="period">
                                                    <#list years as year>
                                                        <option value="${year[0]!}">${year[1]!}</option>
                                                     </#list>
                                                    </select>
                                                </label>
                                                <label>
                                                    <span>季节</span>&nbsp;&nbsp;
                                                    <select class="" id="season" name="season">
                                                        <option>春</option>
                                                        <option>夏</option> 
                                                        <option>秋</option>
                                                        <option>冬</option> 
                                                    </select>
                                                </label>
                                                 <label>
                                                    <span>性别</span>&nbsp;&nbsp;
                                                    <select class="" id="sex" name="sex">
                                                        <option value="男">男</option>
	                                                    <option value="女">女</option>
	                                                    <option value="女">中性</option>
                                                    </select>
                                                </label>
                                                
                                            </div>
                                            <div class=" find-col" style="width: auto;">
                                                    <span class="find_sp"><span class="red">*</span>风格</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <div class="find_div bs-example styleLabel" style="height:auto;">
                                                        <input type="text" id="style" value="" data-role="tagsinput" placeholder="输入内容后，敲回车键生成标签" />
                                                        <div class="find_div_xianshi" >
                                                            <span>这里是提示</span>
                                                        </div>
                                                    </div>
                                            </div>
                                    </div>
                                        </div>
                            </div>
                            
                            <div class=" custorm-view center clearfix">
                                <span class="pull-left bold">款式细节明细</span>
                            </div>
                            <div class='box-body pad marign-top center' style="padding: 10px 0">
                                <textarea id="detailDescription"  name="detailDescription" rows="10" cols="80" >
                                 	 <table border="1px solid #ccc" cellpadding="1" cellspacing="0" class="particulars center" style="height:auto;">
								<tbody>
									<tr>
										<th style="background-color:#f6f6f6; height:35px; text-align:center;">细节</th>
										<th style="background-color:#f6f6f6; text-align:center;">描述</th>
										<th style="background-color:#f6f6f6; text-align:center;">尺寸大小</th>
										<th style="background-color:#f6f6f6; text-align:center;">位置</th>
										<th style="background-color:#f6f6f6; text-align:center;">备注</th>
									</tr>
									<tr>
										<td style="height:35px; text-align:center">扣子</td>
										<td style="text-align:center">用金属/树枝</td>
										<td style="text-align:center">2.8cm</td>
										<td style="text-align:center">左肩</td>
										<td style="text-align:center">&nbsp;</td>
									</tr>
									<tr>
										<td style="height:35px; text-align:center">下摆参数</td>
										<td style="text-align:center">针数参考图片</td>
										<td style="text-align:center">高7cm</td>
										<td style="text-align:center">下摆</td>
										<td style="text-align:center">针织工艺需与老朱细节沟通</td>
									</tr>
									<tr>
										<td style="height:35px; text-align:center">&nbsp;</td>
										<td style="text-align:center">&nbsp;</td>
										<td style="text-align:center">&nbsp;</td>
										<td style="text-align:center">&nbsp;</td>
										<td style="text-align:center">&nbsp;</td>
									</tr>
								</tbody>
							</table>
                                </textarea>
                            </div>
                            <div class=" custorm-view clearfix center" style="margin-top: 10px">
                                 <span class="pull-left bold">面辅料明细</span>
                            </div>
                            <div class='box-body pad marign-top center' style="padding: 10px 0">
                                <textarea id="accessoryDetail" name="accessoryDetail" rows="10" cols="80">
                                	 <table border="1px solid #ccc" cellpadding="1" cellspacing="0" class="particulars center" style="height:auto;">
								<tbody>
									<tr>
										<th colspan="7" style="background-color:#f6f6f6; height:35px; text-align:center">面料明细</th>
									</tr>
									<tr>
										<th style="background-color:#f6f6f6; height:35px; text-align:center;">&nbsp;</th>
										<th style="background-color:#f6f6f6; text-align:center;">颜色</th>
										<th style="background-color:#f6f6f6; text-align:center;">面料名称</th>
										<th style="background-color:#f6f6f6; text-align:center;">成分</th>
										<th style="background-color:#f6f6f6; text-align:center;">供应商信息</th>
										<th style="background-color:#f6f6f6; text-align:center;">供应商编号</th>
										<th style="background-color:#f6f6f6; text-align:center;">所用部位</th>
									</tr>
									<tr>
										<td style="height:35px; text-align:center">主身部</td>
										<td style="text-align:center">&nbsp;</td>
										<td style="text-align:center">例如：牛仔/灯芯绒</td>
										<td style="text-align:center">&nbsp;</td>
										<td style="text-align:center">&nbsp;</td>
										<td style="text-align:center">&nbsp;</td>
										<td style="text-align:center">&nbsp;</td>
									</tr>
									<tr>
										<td style="height:35px; text-align:center">撞部</td>
										<td style="text-align:center">&nbsp;</td>
										<td style="text-align:center">&nbsp;</td>
										<td style="text-align:center">&nbsp;</td>
										<td style="text-align:center">&nbsp;</td>
										<td style="text-align:center">&nbsp;</td>
										<td style="text-align:center">&nbsp;</td>
									</tr>
									<tr>
										<td style="height:35px; text-align:center">里部</td>
										<td style="text-align:center">&nbsp;</td>
										<td style="text-align:center">&nbsp;</td>
										<td style="text-align:center">&nbsp;</td>
										<td style="text-align:center">&nbsp;</td>
										<td style="text-align:center">&nbsp;</td>
										<td style="text-align:center">&nbsp;</td>
									</tr>
								</tbody>
							</table>
							
							<table border="1px solid #ccc" cellpadding="1" cellspacing="0" class="particulars center" style="height:auto;">
								<tbody>
									<tr>
										<th colspan="6" style="background-color:#f6f6f6; height:35px; text-align:center">辅料明细</th>
									</tr>
									<tr>
										<th style="background-color:#f6f6f6; height:35px; text-align:center;">辅料名称</th>
										<th style="background-color:#f6f6f6; text-align:center;">数量</th>
										<th style="background-color:#f6f6f6; text-align:center;">位置</th>
										<th style="background-color:#f6f6f6; text-align:center;">车法细节</th>
										<th style="background-color:#f6f6f6; text-align:center;">明细图片</th>
										<th style="background-color:#f6f6f6; text-align:center;">备注</th>
									</tr>
									<tr>
										<td style="height:35px; text-align:center;">&nbsp;</td>
										<td style="text-align:center;">&nbsp;</td>
										<td style="text-align:center;">&nbsp;</td>
										<td style="text-align:center;">&nbsp;</td>
										<td style="text-align:center;">&nbsp;</td>
										<td style="text-align:center;">&nbsp;</td>
									</tr>
								</tbody>
							</table>
                                </textarea>
                             </div>
                             <div class="center">
                                    <button type="button" class="btn btn-primary" id="add_pattern">确定上传</button>
                                    <button type="button" class="btn btn-default" id="repeal">取消上传</button>
                            </div> 
                            </form>  
                        </div>
            		</div>
            	</div>
            </section>
            </aside><!-- /.right-side -->

        </div><!-- ./wrapper -->
        <!-- jQuery 2.0.2 -->
        <style type="text/css">
        .table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
			    vertical-align: middle;
			}
        .custorm-view{
                border: none;
            }
            .bold{
            	font-size: 14px;
            	font-weight: bold;
            }
            .style-num{
            	border: 1px solid #ccc; 
            	padding: 6px;
            	width: 50px;
            	height: 32px;
            	position: relative;
            }
        .clear{
            clear: both;
            width: 100%;
            height: 1px;

        }
        .find_sp{
            margin-bottom: 10px;
            display: inline-block;
            font-weight: bold;
            float: left;
            padding-right: 5px;
        }
        .find_div{
            width: 90%;
            height:90px;
            border:1px solid #ccc;
            float: left;
        }
        .find-col label{
        	margin-right: 3%;
        }
        .ol_left{
            width: 100%;
            height: 30px;
            line-height: 30px;
            padding: 0;
        }
        .ol_left>li{
            float: left;
            margin-right: 5px;
        }
        .ol_left li, .ol_left{
        	margin-bottom: 0;
        }
        .six-font{
            font-size: 14px;
        }
        .six-font>span{
            font-size: 16px;
        }
     
        .pull-left {
            border-left: 6px solid #3882FF;
            padding: 0 5px;
        }
        .photo{
            height: 430px;
            max-height: 430px;
            border:1px solid #ccc;
            margin-top: 20px;
            margin-bottom: 20px;
            padding: 0;
        }
        .shangchuan{
            margin-top: 100px;
            position: relative;
            cursor: pointer;
            background: #fafafa;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
            display: inline-block;
            *display: inline;
            *zoom: 1;
        }
        .shangchuan  input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer
        }
        .zhanshi{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            display: none;
            background-color: #fff;

        }
        #zhanshi_photo{
        	width: 720px;
        	height: 405px;
        	border: 1px solid #ccc;
        }
        .zhanshi_find1{
            widows: 96%;
            height: 96%;
            margin: 1% 2%;
        }
        .zhanshi_find1>.col-md-8{
            
            height: 100%;
            padding: 0;
        }
        .zhanshi img{
            width: 100%;
            height: 100%;
            border-width: 0;
        }
        .zhanshi_find1>.col-md-4{padding: 0;}
        .zhanshi_find1>.col-md-4>span{
            width: 20%;
            height: 60px;
            display: inline-block;
            float: left;
            border:1px solid #ccc;
            cursor: pointer;
            margin:0 0 10px  10px;
            position: relative;
        }
        .span_active{
            border:2px solid #3882FF !important;
            box-shadow: 0 0 3px #3882ff;
        }
        .zhanshi_find1>.col-md-4>span>p{
            position: absolute;
            width: 100%;
            text-align: center;
            height: 20px;
            line-height: 20px;
            bottom: -10px;
            font-size: 10px;
            background-color: #4f8aee;
            color: #fff;
            display: none;
        }
        .tianjia{
            display: inline-block;
            width: 20%;
            height: 60px;
            display: inline-block;
            float: left;
            border:1px solid #ccc;
            cursor: pointer;
            margin:0 0 10px  10px;
            position: relative;
        }
        .tianjia  input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer;
            width:100%;
            height: 100%;
        }
        .shejixinxi{
            border:1px solid #ccc;
        }
        .bootstrap-tagsinput input {
	    	padding:0;
		    width: 100%;
		    border:0px;
		}
       .bootstrap-tagsinput{
        	border:none;
       }
       .bootstrap-tagsinput .tag{
        margin-right: 2px;
        color: #3882ff;
        border: 1px solid;
        border-radius: 0;
       }
       .label-info{
        background-color: #fff;
       }
       .particulars tr th, .particulars tr td{
   			border: 1px solid #ccc;
   		}
   		.particulars{
   			margin-bottom: 10px;
   			width: 100%;
   		    margin-top: 10px
   		}
   		.zhanshi_find1>.col-md-4>span>i{
           position: absolute;
           top: -3px;
           right: -7px;
           z-index: 9;
        }
        .find_div_xianshi{
	        height: 30px;
	        line-height: 30px;
	        width: 100%;
	        position: absolute;
	        bottom: -30px;
	        z-index: 9;
	        border:1px solid #ccc;
	        background-color: #fff;
	        display: none;
       }
       .find_div_xianshi>span{
        	padding: 0 10px;
       }
       .find_div{
            position: relative;
        }
        </style>
        <script src="../js/jquery.min.js"></script>
        <!-- Bootstrap -->
        <script src="../js/bootstrap.min.js" type="text/javascript"></script>
        <!-- AdminLTE App -->
        <script src="../js/AdminLTE/app.js" type="text/javascript"></script>
    
        <script src="../js/bootstrap-tagsinput.js"></script>

         <script src="../js/plugins/ckeditor/ckeditor.js" type="text/javascript"></script>
        <!-- Bootstrap WYSIHTML5 -->
        <script src="../js/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" type="text/javascript"></script>
        <script src="../js/order/orderpattern_add.js"></script>
        <script type="text/javascript">
        
                $(function() {
                    // Replace the <textarea id="editor1"> with a CKEditor
                    // instance, using default configuration.
                    model.editor[0]=CKEDITOR.replace('detailDescription');
                    //bootstrap WYSIHTML5 - text editor
                    $(".textarea").wysihtml5();
                });
                $(function() {
                    // Replace the <textarea id="editor1"> with a CKEditor
                    // instance, using default configuration.
                    model.editor[1]=CKEDITOR.replace('accessoryDetail');
                    //bootstrap WYSIHTML5 - text editor
                    $(".textarea").wysihtml5();
                });

                $(function () {

                    $("#file_upload").click(function () {
                    	$('#file_upload2').click();
                    });

                    $('#file_upload2').change(selectImage);
                });
                   
                    function selectImage(){
                    	$('.zhanshi').show();
                    	
                        var $file = $(this);
                        var fileObj = $file[0];
                        var windowURL = window.URL || window.webkitURL;
                        var dataURL;
                        var $img = $("#zhanshi_photo");
                        if (fileObj && fileObj.files && fileObj.files[0]) {
                            dataURL = windowURL.createObjectURL(fileObj.files[0]);
                            if($(':file').length==1)
                            	$img.attr('src', dataURL);
                        } else {
                            dataURL = $file.val();
                            var imgObj = document.getElementById("zhanshi_photo");
                            // 两个坑:
                            // 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
                            // 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
                            imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                            if($(':file').length==1)
                            	imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;

                        }
                         var a=$('<span >'+'<i class="fa fa-fw fa-times"></i> <img src="'+dataURL+'">'+'  <p >主图</p>'+' </span> ');
                         // '+dataURL+'
    					a.children('i').click(removeImage);
                        
    					a.find('p').click(selectMainImage);
    					
    					a.hover(function () {
                            $(this).find('p').show();
    					},function(){
    						if($(this).find('p').html()!='主图')
                          		$(this).find('p').hide();
    					});
                         
                        $('.tianjia').before(a);
                        
                        if($(':file').length>1){
                        	a.find('p').html('设为主图');
                        }
                        
                        if($(':file').length==1)
                        	$('.tianjia').siblings().children('p').eq(0).css('display','block');
                        
                        $('.zhanshi_find1 .col-md-4 span').click(function(){
                            $(this).addClass('span_active');
                            $(this).siblings('span').removeClass('span_active');
                            var src=$(this).find('img').attr('src');
                            $("#zhanshi_photo").attr("src",src);

                        })
    					
                        var input=$('<input type="file" accept="image/*" id="file_upload2"/>')
                        $(this).removeAttr('id').hide().after(input);
                        input.change(selectImage);
    					if($(':file').length==6){
    						$(this).parent().hide();
    					}
    					
                    }
                    
               $('.zhanshi_find1 .col-md-4 span').click(function(){
                      $(this).addClass('span_active');
                      $(this).siblings('span').removeClass('span_active');
                      $(this).find("p").show();
                      $(this).siblings('span').find("p").hide();
                      var src=$(this).find('img').attr('src');
                      $("#zhanshi_photo").attr("src",src);

                });
                     
                function removeImage(){
    				$('.tianjia').show();
    				var index=$('.zhanshi_find1 .col-md-4 span').index($(this).parent());
    				$(this).parent().remove();
    				$(':file').eq(index).remove();
                    if($(this).next().next().css('display')=='block'){
                        $("#zhanshi_photo").attr('src',null);
                    }
                    return false;
                }
                
                function selectMainImage(){
    				$(this).parent().siblings('span').find('p').html('设为主图').hide();
    				$(this).html('主图');
    				return false;
    			}
				
                $(function(){
                	model.orderId='${orderId!}';
                	model.designId='${businessId!}';
                })
        </script>
        
    </body>
</html>
